<template>
  <div>
    <c-title :hide="false" text="总直营业绩"></c-title>
    <div class="flex-col flex-1 group">
      <div class="flex-row items-center">
        <div class="font30" @click="openPicker">
          <div class="color6">
            {{ date ? date : "请选择日期" }}
            <img class="ml-4 image_4" src="https://shops.cg500.com/static/newimg/17137751395536509357.png" />
          </div>
        </div>
      </div>
      <div class="mt-24 flex-col">
        <div class="flex-col section_3">
          <div class="flex-row justify-center items-center self-stretch">
            <span class="text_3">{{ items.all_yeji }}</span>
            <div class="detail-btn" @click="toDetail">详情</div>
          </div>
          <!-- <span class="self-center font_2 text_5">总团队业绩</span> -->
          <span class="self-center font_2 text_5" v-if="type == 1">总直营业绩</span>
          <span class="self-center font_2 text_5" v-if="type == 2">总伙伴业绩</span>
          <div class="flex-row justify-between equal-division">
            <div class="flex-col items-center">
              <span class="font_3">{{ items.team_dan }}</span>
              <span class="font_2 text_6 mt-6-5">团队单数</span>
            </div>
            <div class="horiz-divider"></div>
            <div class="flex-col items-center">
              <span class="font_3">{{ items.zi_dan }}</span>
              <span class="font_2 text_6 mt-6-5">自购订单单数</span>
            </div>
          </div>
        </div>
        <div class="flex-col list">
          <div class="flex-col section_4 list-item mt-15-5" v-for="(item, index) in allList" :key="index">
            <div class="flex-row justify-center items-baseline self-stretch">
              <span class="font_4">{{ item.ziji }}</span>
            </div>
            <span class="self-center font_5 text_7">{{ item.title }}</span>
            <div class="grid">
              <div class="flex-col items-center grid-item" v-for="(item, index) in allList[index].goods" :key="index">
                <div class="group_2">
                  <span class="font_6">{{ item.all_price }}</span>
                </div>
                <span class="font_8 mt-5">{{ item.title }}</span>
                <span class="font_8 mt-5">{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="pickerShow" position="bottom">
          <van-datetime-picker v-model="currentDate" @cancel="pickerCancel" @confirm="pickerConfirm" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate"  />
     </van-popup>
  </div>
</template>

<script>
import teamPerformanceController from "./teamPerformanceController";

export default teamPerformanceController;
</script>


<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
.mt-6-5 {
  margin-top: 7px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-15-5 {
  margin-top: 15px;
}

.group {
  padding: 10px 15px 43px;
  overflow-y: auto;
}

.image_4 {
  width: 11px;
  height: 7px;
}

.section_3 {
  padding: 34px 48px 15px 60px;
  border-radius: 12px;
  background-image: url("https://shops.cg500.com/static/newimg/17137752213943626221.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.text_3 {
  color: #ffffff;
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 27px;
  text-shadow: 0px 0px 10px #fb4b4c57;
}

.font_2 {
  font-size: 12px;
  font-family: PingFang SC;
  line-height: 11px;
  color: #ffffff;
}

.text_5 {
  margin-top: 7px;
  line-height: 12px;
}

.equal-division {
  align-self: stretch;
  margin-top: 18px;
}

.font_3 {
  font-size: 22px;
  font-family: PingFang SC;
  line-height: 16px;
  color: #ffffff;
}

.text_6 {
  line-height: 12px;
  opacity: 0.9;
}

.horiz-divider {
  background-color: #ffffff78;
  width: 1px;
  height: 35px;
}

.list {
  padding-top: 16px;
}

.section_4 {
  padding: 33px 15px 16px;
  border-radius: 12px;
  background-image: url("https://shops.cg500.com/static/newimg/17137752214051387948.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.list-item:first-child {
  margin-top: 0;
}

.font_4 {
  font-size: 30px;
  font-family: PingFang SC;
  line-height: 23px;
  font-weight: 700;
  color: #010611;
}

.font {
  font-size: 18px;
  font-family: PingFang SC;
  line-height: 14px;
  font-weight: 700;
  color: #010611;
}

.font_5 {
  font-size: 13px;
  font-family: PingFang SC;
  line-height: 13px;
  color: #70767f;
}

.text_7 {
  margin-top: 6px;
}

.grid {
  margin-top: 16px;
  /* height: 237rpx; */
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 10px;
  column-gap: 10px;
}

.grid-item {
  padding: 13px 0;
  background-color: #ffffff;
  border-radius: 8px;
}

.group_2 {
  line-height: 13px;
}

.font_6 {
  font-size: 16px;
  font-family: PingFang SC;
  line-height: 12px;
  color: #151515;
}

.font_8 {
  font-size: 11px;
  font-family: PingFang SC;
  line-height: 11px;
  color: #70767f;
}

.detail-btn {
  width: 32px;
  height: 25px;
  border: 1px solid #fff;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  line-height: 25px;
  margin-left: 5px;
}
</style>